{extend name="layout" /}
{block name="body"}    
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          
          <form action="{:url('add')}" method="post" name="add-form" class="row add-form">
            <div class="form-group col-md-12" id="form_group_ad_type">
              <label for="type">链接类型</label>
              <div class="form-controls clearfix">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="typeOne" name="type" class="custom-control-input" value="1" checked>
                  <label class="custom-control-label" for="typeOne">文字链接</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="typeTwo" name="type" class="custom-control-input" value="2">
                  <label class="custom-control-label" for="typeTwo">图片链接</label>
                </div>
              </div>
            </div>
            <div class="form-group col-md-12">
              <label for="title">链接标题</label>
              <div class="form-controls">
                <input type="text" class="form-control" id="title" name="title" value="" placeholder="请输入链接标题" />
                <small class="form-text text-muted">必填，30个字符以内</small>
              </div>
            </div>
            <div class="form-group col-md-12">
              <label for="url">链接地址</label>
              <div class="form-controls">
                <input type="text" class="form-control" id="url" name="url" value="" placeholder="请输入链接地址" />
                <small class="form-text text-muted">必填，请以 <code>http</code> 或 <code>https</code> 开头</small>
              </div>
            </div>
            {php}
            $form = ['title' => '单张图片', 'name' => 'logo', 'extra_class' => 'd-none', 'remark' => '必须'];
            {/php}
            {include file="../application/admin/view/form/image.html" type='' /}
            <div class="form-group col-md-12">
              <label for="timeset">时间限制</label>
              <div class="form-controls clearfix">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="timesetOne" name="timeset" class="custom-control-input" value="0" checked>
                  <label class="custom-control-label" for="timesetOne">永不过期</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="timesetTwo" name="timeset" class="custom-control-input" value="1">
                  <label class="custom-control-label" for="timesetTwo">在设内时间内有效</label>
                </div>
              </div>
            </div>
            {php}
            $form = ['title' => '开始时间-结束时间', 'name' => 'fl_time', 'extra_class' => 'd-none'];
            {/php}
            {include file="../application/admin/view/form/daterange.html" type='' /}
            <div class="form-group col-md-12">
              <label for="sort">排序</label>
              <div class="form-controls">
                <input type="text" class="form-control" name="sort" id="sort" value="10" />
              </div>
            </div>
            <div class="form-group col-md-12">
              <label>状态</label>
              <div class="form-controls clearfix">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="statusOne" name="status" class="custom-control-input" value="0">
                  <label class="custom-control-label" for="statusOne">禁用</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="statusTwo" name="status" class="custom-control-input" value="1" checked>
                  <label class="custom-control-label" for="statusTwo">启用</label>
                </div>
              </div>
            </div>
            <div class="form-group col-md-12">
              <button type="submit" class="btn btn-primary m-r-5 ajax-post" target-form="add-form">确 定</button>
              <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
            </div>
          </form>
 
        </div>
      </div>
    </div>
    
  </div>
{/block}
{block name="otherjs"}
{include file="../application/admin/view/form/formjs.html" /}
<script type="text/javascript">
    $(function () {
        // 单选按钮之间切换
        var triggers = {
            "timeset" : [
                ["1", "fl_time"]
            ],
            "type" : [
                ["2", 'logo']
            ]
        };
        $.each(triggers, function (trigger, content) {
            jQuery(document).delegate('[name='+ trigger +']', 'change', function (event, init) {
                var $trigger = $(this);
                var $value   = $trigger.val();
                
                $(content).each(function () {
                    var $self    = $(this);
                    var $values  = $self[0].split(',') || [];
                    var $targets = $self[1].split(',') || [];
                    
                    // 如果触发的元素是单选，且没有选中则设置值为空
                    if ($trigger.attr('type') == 'radio' && $trigger.is(':checked') == false) {
                        $value = '';
                    }
                    
                    if ($.inArray($value, $values) >= 0) {
                        // 符合指定的值，显示对应的表单项
                        for (var index in $targets) {
                            // 如果不是该对象自身直接创建的属性（也就是该属//性是原型中的属性），则跳过显示
                            if (!$targets.hasOwnProperty(index)) {
                                continue;
                            }
                            $('#form_group_'+$targets[index]).removeClass('d-none');
                        }
                    } else {
                        for (var item in $targets) {
                            $('#form_group_' + $targets[item]).addClass('d-none');
                        }
                    }
                });
            });
        });
    });
</script>
{/block}